import { defineStore } from 'pinia'
import piniaPersistConfig from "./piniaPersist";
import { getLightColor, getDarkColor } from '@/utils/color'

export const useSystemStore =  defineStore('system',{
  state: () => ({
        themeColor: '#D32F44', // 默认主题色
        isFullScreen: false,   // 是否全屏
        isMenuCollapsed: false // 左侧菜单是否收起      
    }),
  getters:{},
  actions:{
    // 切换主题皮肤
    changeThemeColor(val = '#D32F44') {
        this.themeColor = val
        changePrimary(val)
        // this.$patch({ ['themeColor']: val });

    },
    // 切换全屏
    changeFullScreen(val: boolean) {
        console.log('changeFullScreen------------', val)
        this.isFullScreen = val
    },
    // 切换左侧菜单收起展开
    changeMenuCollapse(val: boolean) {
      this.isMenuCollapsed = val || false
    }
  },
  persist: piniaPersistConfig("system"),

})
const changePrimary = (val:string) => {
  if (!val) {
    val = '#D32F44'
  }
  // themeColor.value = val
  // 计算主题颜色变化
  document.documentElement.style.setProperty('--el-color-primary', val)
  document.documentElement.style.setProperty(
    '--el-color-primary-dark-2',
    `${getDarkColor(val, 0.3)}`
  )
  for (let i = 1; i <= 9; i++) {
    const primaryColor = `${getLightColor(val, i / 10)}`
    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)
  }
}
// export const useSystemStore = defineStore('system', {
//     state: () => ({
//         user: {
//             username: "",
//             password: ""
//         },
//         username: "",
//         password:""
//     }),
//     persist: {
//         enabled: true,
//         strategies: [{
//             storage: localStorage,//localStorage存储多个key
//             paths: ['user'],
//             key: "user"
//         }, {
//             storage: localStorage,
//             paths: ['password'],
//             key: "password"
//         },{
//             storage: sessionStorage,//sessionStorage存储多个key
//             paths: ['password'],
//             key: "password"
//         }, {
//             storage: sessionStorage,
//             paths: ['username'],
//             key: "username"
//         }],
//     },
//     // getters: {
//     //     getUser: (state) => {
//     //         return state.user
//     //     },
//     // },
//     // actions: {
//     //     Login(data) {
//     //         return new Promise((resolve, reject) => {
//     //             this.user = {
//     //                 ...this.user,
//     //                 ...data
//     //             }
//     //             this.username = data.username
//     //             this.password = data.password
//     //             setCookie('token', data.username)
//     //             resolve()
//     //         })
//     //     },
//     //     LoginOut(data) {
//     //         console.log(this, data, "+this")
//     //         return new Promise((resolve, reject) => {
//     //             this.user = {}
//     //             this.username = ""
//     //             this.password = ""
//     //             removeCookie("token");
//     //             resolve()
//     //         })

//     //     },
//     // }
// })